<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-col :span="12">
            <el-form :inline="true" :model="page">
              <el-form-item label="关键字" style="margin-right:50px">
                <el-input
                  placeholder="根据文章标题搜索"
                  v-model="page.keyword"
                />
              </el-form-item>
              <el-form-item label="状态">
                <el-select label="请选择" v-model="page.state">
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="9">
            <el-button @click="clearForm">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
          <el-col :span="3">
            <el-button
              icon="el-icon-edit"
              type="success"
              @click="modify()"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
        <el-alert type="info" show-icon>
          <template slot="title"> 数据一共 {{ total }}条 </template>
        </el-alert>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="90">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="400">
            <template slot-scope="{ row }">
              <span style="margin-left: 10px">{{ row.title }}</span>
              <i
                class="el-icon-film"
                v-if="row.videoURL"
                style="margin-left:10px;color: #2100ff; font-size: 18px"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="230">
          </el-table-column>
          <el-table-column prop="username" label="录入人" width="300">
          </el-table-column>
          <el-table-column prop="createTime" label="录入时间" width="300">
          </el-table-column>
          <el-table-column
            prop="state"
            :formatter="formatter"
            label="状态"
            width="100"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="{ row }">
              <el-button @click="handleClick(row.id)" type="text" size="small"
                >预览</el-button
              >
              <el-button type="text" size="small" @click="titleState(row)">
                {{row.state ? '禁止' : '启用'}}
              </el-button>
              <el-button type="text" size="small" :disabled='row.state === 1' @click="modify(row.id)">修改</el-button>
              <el-button type="text" size="small" :disabled='row.state === 1' @click="titleDeleta(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.page"
            layout="prev, pager, next,sizes,jumper"
            :total="page.total"
            @current-change="changePage"
            @size-change="changeSize"
            :page-sizes="[5, 10, 15, 20]"
          >
            >
          </el-pagination>
        </el-row>
      </el-card>
      <articles-add ref="modify" :showDialog="showDialog"/>
      <el-dialog
        title="浏览文章"
        :visible="titleDialog"
        @close="titleDialog = false"
      >
      <h2 style="margin-top: 0">{{titleDetails.title}}</h2>
      <p>
        <span>{{titleDetails.createTime}}</span>
        <span>{{titleDetails.creator}}</span>
      </p>
      <p v-model="titleDetails.articleBody"></p>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, detail,changeState, remove} from "@/api/hmmm/articles";
import { status } from "@/api/hmmm/constants";
import ArticlesAdd from "../components/articles-add.vue";
export default {
  components: {
    ArticlesAdd
  },
  data() {
    return {
      page: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      tableData: [],
      status,
      total: 0,
      showDialog: false, // 新增技巧显示
      titleDialog: false, // 文章详情显示
      titleDetails: {},  // 文章详情
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      const { data } = await list(this.page);
      // console.log(data);
      this.tableData = data.items;
      this.total = data.counts;
    },
    changePage(newPage) {
      this.page.page = newPage;
      this.getList();
    },
    changeSize(newSize) {
      this.page.page = 1;
      this.page.pagesize = newSize;
      this.getList();
    },
    formatter(row, column, cellValue, idnex) {
      // console.log(cellValue);
      const temp = status.find(item => item.value === cellValue);
      // console.log(temp.label);
      return temp ? temp.label : "";
    },
    // 清空表单
    clearForm() {
      this.page = {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      };
      this.getList();
    },
    // 搜索
    async search() {
      const { data } = await list(this.page);
      this.tableData = data.items;
      this.total = data.counts;
    },
    // 预览文章详情
    async handleClick(id) {
      this.titleDialog = true;
      const {data} = await detail({id})
      // console.log(data);
      this.titleDetails = data
    },
    async titleState(row) {
      if(row.state === 0) {
        await changeState({id: row.id, state: 1})
      }else {
        await changeState({id: row.id, state: 0})
      }
      this.$message.success('操作成功')
      this.getList()
    },
    // 修改
    modify(id) {
      this.$refs.modify.modify(id)
      this.showDialog = true
    },
    // 删除 
    async titleDeleta(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?')
      await remove({id})
      this.$message.success('删除成功')
      this.getList()
    }
  }
};
</script>

<style scoped lang="scss"></style>
